<template>
  <div>
    <m-infinite v-model='loading' :isFinished='isFinished' @onLoad='getPexelsData'>
      <m-water-fall
        class='px-1 w-full'
        :data='dataList'
        nodeKey='id'
        :column='isMobileTerminal ? 3 : 5'
        :picturePreReading='true'
      >
        <template v-slot='{item,width}'>
          <item-vue
            :data='item'
            :width='width'
          >
          </item-vue>
        </template>
      </m-water-fall>
    </m-infinite>
  </div>
</template>

<script setup>
import { isMobileTerminal } from '@/utils/flexible'
import { ref } from 'vue'
import { getPexelsList } from '@/api/pexels'
import itemVue from '@/views/main/mainBody/item.vue'

let query = {
  page:1,
  size:10
}
// 数据是否加载中
const loading = ref(false)
// 数据是否全部加载完成
const isFinished = ref(false)
// 数据源
const dataList = ref([])

// 加载数据的方法
const getPexelsData = async () => {
  if (isFinished.value) {
    return
  }
  // 完成了第一次请求后，后续的请求让page自增
  if (dataList.value.length) {
    query.page += 1
  }

  // 触发接口
  const res = await getPexelsList(query)
  if (query.page === 1) {
    dataList.value = res.list
  } else {
    dataList.value.push(...res.list)
  }

  // 判断数据是否全部加载完成
  if (dataList.value.length === res.total) {
    isFinished.value = true
  }
  // 修改loading标记
  loading.value = false
}
</script>

<style lang='scss' scoped>

</style>
